<template>
  <div class="tableBox2" ref="tableWrap">
    <el-table
      ref="table"
      border
      stripe
      v-loading="tableLoading"
      :data="tableData"
      style="width: 100%"
      class="tableTh28"
      height="73vh"
    >
      <el-table-column type="index" label="行次"></el-table-column>
      <el-table-column label="指标编码" prop="levelCd" align="left"></el-table-column>
      <el-table-column label="产品收入项目名称" prop="name" align="left" width="230"></el-table-column>
      <el-table-column
        v-for="(item,index) in colDefList"
        :key="index"
        :label="item.name"
        :prop="item.indexKey"
        align="right"
      ></el-table-column>
    </el-table>
  </div>
</template>

<script>
import { $budgetAPI } from "@/api";
import { createSpanOne } from "@/utils/mixin.js";
import prefixAPI from "@/api/prefixAPI";
export default {
  name: "detailTable-tab",
  props: {
    flag: {
      type: Number,
      default: 1
    },
    areaId: {},
    month: ''
  },

  data () {
      return {
          tableLoading: false,
          tableData:[],
          colDefList:[],
          flagChange:'',
          monthChange:'',
      }
  },
  watch:{
      flag:{
        handler(val){
          this.flagChange = this.flag;
          console.log(val)
        },
        　immediate: true
      },
      month:{
        handler(val){
          this.monthChange = this.month;
          if(val){
            this.getData()
          }
        },
          immediate: true

      },
  },
  mounted () {
      // this.getData();
      this.getMaxAcctMonthByCampDetail();
  },
  methods: {
    getData() {
      let areaId = this.areaId;
      let month = this.monthChange;
      let flag = this.flag;
      this.tableLoading = true;
      $budgetAPI.mainCampDetail(
        {
          areaId: areaId,
          accMonth: month,
          flag: flag
        },
        res => {
          this.tableLoading = false;
          if (res.code == 0) {
            this.colDefList = res.content.colDefList;
            this.tableData = res.content.data;
          } else {
            this.alertError(res);
          }
        },
        err => {
          this.tableLoading = false;
        }
      );
    },

     getMaxAcctMonthByCampDetail(){
      let flag=this.flagChange
       $budgetAPI.getMaxAcctMonthByCampDetail( {flag:flag},
        res => {
           if (res && res.code == 0) {
               // this.month=res.content;
               // this.$emit('update:month', res.content);
               this.dispatch('detailTable',res.content);
               // this.$parent.month = res.content;
               // this.$emit('monthChange',this.$parent.month)
              this.getData()
           }
            },
            err => {
            }
          );
      },

      //查找任意父组件
      dispatch(componentName, params){
          var parent = this.$parent || this.$root;
          var name = parent.$options.name;
          //寻找父级，如果父级不是符合的组件名，则循环向上查找
          while (parent && (!name || name !== componentName)) {
          // while (parent && (!name || !componentName.includes(name))) {
              parent = parent.$parent;
             if (parent.$options.name == componentName) {
                 // parent.$emit('update:month', params);
                 parent.form.month = params;  //直接给父组件传值，这样父组件就可以接到值
               }
          }
          //找到符合组件名称的父级后，触发其事件。整体流程类似jQuery的closest方法
          // if (parent.$options.name == componentName) {
          //     alert("1")
          //     parent.$emit('update:month', params);
          //   }
      },
  }
};
</script>

<style>
</style>
